<template>
  <div v-if="items.length == 0" class="ib">
    <span v-if="type == 'text'" :style="style">{{ name }}</span>
    <Tag v-if="type == 'tag'" :color="tagcolor">{{ name }}</Tag>
    <Badge v-if="type == 'dot'" :color="tagcolor" :text="name" />
    <Icon
      v-if="type == 'icon'"
      :type="item.icon"
      :color="tagcolor"
      :title="name"
      size="24"
    />
  </div>
  <div v-else>
    <span class="ib" v-for="(li, i) in items" :key="i">
      <span v-if="type == 'text'" :style="li.style">{{ li.name }}</span>
      <Tag v-if="type == 'tag'" :color="li.tagcolor">{{ li.name }}</Tag>
      <Badge v-if="type == 'dot'" :color="li.tagcolor" :text="li.name" />
      <Icon
        v-if="type == 'icon'"
        :type="item.icon"
        :color="tagcolor"
        :title="name"
        size="24"
      />
    </span>
  </div>
</template>
<script>
export default {
  name: "state",
  data() {
    return {
      name: "",
      isMore: false,
      item: {},
      items: [],
      data: [],
    };
  },
  props: {
    default: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "text",
      validator: function (value) {
        return ["text", "tag", "dot", "icon"].indexOf(value) != -1;
      },
    },
    code: {
      type: String,
      required: true,
    },
    value: {
      type: [String, Number],
      required: false,
    },
    color: {
      type: Boolean,
      default: true,
    },
    icon: {
      type: Boolean,
      default: false,
    },
    img: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    this.data = this.$store.getters.dictionaryByKey(this.code) || [];
  },
  methods: {
    setName(v) {
      if ((v + "").indexOf(",") == -1) {
        var item;
        this.data.map((u) => {
          if (u.code == v) {
            item = u;
          }
        });
        if (item) {
          this.name = item.name;
          this.item = item;
        } else {
          this.name = this.value;
        }
      } else {
        this.isMore = true;
        var items = [];
        var ul = (v + "").split(",");
        this.data.map((u) => {
          if (ul.indexOf(u.code) > -1) {
            u.tagcolor = u.color | "default";
            u.style = { color: u.color | "inherit" };
            items.push(u);
          }
        });
        this.items = items;
      }
    },
  },
  computed: {
    tagcolor() {
      if (
        this.color &&
        this.item &&
        this.item.color != "" &&
        this.item.color != null
      ) {
        return this.item.color;
      }
      return "default";
    },
    style() {
      if (!this.color) {
        return {};
      }
      return {
        color:
          this.item && this.item.color != "" && this.item.color != null
            ? this.item.color
            : "inherit",
      };
    },
  },
  watch: {
    value(v) {
      this.setName(v);
      // this.$forceUpdate()
    },
    data(v) {
      if (v.length > 0) {
        this.setName(this.value);
        this.$forceUpdate();
      }
    },
  },
};
</script>